<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ page language="java" import="com.server.web.JsVersionUtil"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta charset="UTF-8">
<title>北京市人民政府外事办公室领事保护教育服务平台</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet"
	href="<c:url value='/share/bootstrap.min.css'></c:url>">
<link rel="stylesheet"
	href="<c:url value='/share/AllStyle.css'></c:url>">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="<c:url value='/js/jquery.min.js'></c:url>"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="<c:url value='/js/bootstrap.min.js'></c:url>"></script>
<script src="<c:url value='/js/all.js'></c:url>"></script>
<script src="<c:url value='/js/serverCommonJs.js'></c:url>"></script>
<script src="<c:url value='/js/rqfCommon/rqfCommon.js'></c:url>"></script>
<style type="text/css">
#touxiang_true {
	float: left;
	width: 36px;
	height: 36px;
	border-radius: 100%;
	display: block;
	line-height: 60px;
	color: #787d82;
	text-align: center;
	-webkit-transition: background-color 0.2s;
	-moz-transition: background-color 0.2s;
	transition: background-color 0.2s;
}

.vertical {
	margin: 0 8px;
	background: #dae1e6;
	display: inline-block;
	width: 1px;
	height: 24px;
	vertical-align: middle;
}
</style>
</head>
<body>
	<div class="home_header_2">
		<div class="Interface_center Interface_relative">
			<ul>
				<li>
					<div>课程类型：</div>
					<ul class="Interface_relative">
						<li><a href="javascript:;" class="home_header_2_Click">全部</a></li>
						<li><a href="javascript:;" data-value="1">留学</a></li>
						<li><a href="javascript:;" data-value="2">务工</a></li>
						<li><a href="javascript:;" data-value="3">旅行</a></li>
						<li><a href="javascript:;" data-value="4">商贸</a></li>
						<li><a href="javascript:;" data-value="5">反恐</a></li>
						<li><a href="javascript:;" data-value="6">疫情</a></li>
						<li><a href="javascript:;" data-value="7">法律纠纷</a></li>
						<li><a href="javascript:;" data-value="8">刑事案件</a></li>
						<li><a href="javascript:;" data-value="9">通识知识</a></li>
					</ul>
				</li>
				<li>
					<div>排序：</div>
					<ul class="Interface_relative">
						<li><a href="javascript:;" class="home_header_2_Click">最新</a></li>
						<li><a href="javascript:;">最热</a></li>
					</ul>
				</li>
				<li>
					<div>课程形式：</div>
					<ul class="Interface_relative">
						<li><a href="javascript:;" class="home_header_2_Click"
							data-value="">全部</a></li>
						<li><a href="javascript:;" data-value="1">图文课程</a></li>
						<li><a href="javascript:;" data-value="2">音频课程</a></li>
						<li><a href="javascript:;" data-value="3">视频课程</a></li>
					</ul>
				</li>
			</ul>
			<div class="home_header_2_Arrow home_header_2_Arrow_true">
				<img src="<c:url value='/share/images/Arrow.png'></c:url>" class="transform_rotate">
			</div>
		</div>
	</div>

	<div class="home_content Interface_center" style="padding: 10px;">
		<ul class="Interface_relative row" id="home_Page_video_audio_text">
		</ul>
		<br>
		<br>
		<div id="WH-pagebar" class="WH-pagebar"></div>
		<br>
		<br>
	</div>
	
	<script type="text/javascript">
	
		var rootPath = '${rootPath}';
		var fileServer = '${fileServer}';
		
		var filterHelper = gridFilter();
		var wh_count;//总页数
		loadData("", "", "auditTime", 0);//初始化
		$(function() {
			$(".home_header-nav li").click(function() {
				$(".home_header-nav li a").removeClass("home_header_1_ClickA");
				$(this).children().addClass("home_header_1_ClickA");
			});
			var home_text = "";//用来进行课程分类的变量
			var home_value = "";//用来进行课程形式的变量
			var home_audit = "";//用来进行排序
			var home_index;//当前分页码
			$(".home_header_2 .Interface_center>ul>li:eq(0) ul li").on("click",function() {
				$(".home_header_2 .Interface_center>ul>li:eq(0) ul li a").removeClass("home_header_2_Click");
				$(this).children().addClass("home_header_2_Click");
				empty();//清空所有
				home_text = $(this).text() === "全部" ? "" : $(this).children().data('value');//全局变量课程类型的值
				loadData(home_text, home_value, home_audit, 0);
			});
			$(".home_header_2 .Interface_center>ul>li:eq(1) ul li")
					.click(
							function() {
								$(
										".home_header_2 .Interface_center>ul>li:eq(1) ul li a")
										.removeClass("home_header_2_Click");
								$(this).children().addClass(
										"home_header_2_Click");
								empty();//清空所有
								home_audit = $(this).text() === "最新" ? "auditTime"
										: "clickNum";
								loadData(home_text, home_value, home_audit, 0);
							});
			$(".home_header_2 .Interface_center>ul>li:eq(2) ul li")
					.on(
							"click",
							function() {
								$(
										".home_header_2 .Interface_center>ul>li:eq(2) ul li a")
										.removeClass("home_header_2_Click");
								$(this).children().addClass(
										"home_header_2_Click");
								empty();//清空所有
								home_value = $(this).children().data('value');
								loadData(home_text, home_value, home_audit, 0);
							});
			$(".home_header_2_Arrow").click(function() {
				if (!$(this).is(".home_header_2_Arrow_true")) {
					$(this).prevAll().hide();
					$(this).children().addClass("transform_rotate");
					$(this).addClass("home_header_2_Arrow_true");
				} else {
					$(this).prevAll().show();
					$(this).children().removeClass("transform_rotate");
					$(this).removeClass("home_header_2_Arrow_true");
				}
			});
			$(".home_content .row li").click(function() {
				window.location.href = "home_video_images_audio.html";
			});

			//封装清空所有
			function empty() {
				$("#home_Page_video_audio_text").html("");//每次点击时先清空,进行加载新的列表
				$(".pagination *").remove();//每次进行筛选时,进行提前页码清空
			}
		});
		var isFirst = true;
		function loadData(class_id, class_form, home_audit, home_index) {
			filterHelper.clearFilterData();
			var type = class_id;
			if (type != "") {
				//class_id课程分类
				var filterdata = filterHelper.formFilterData("class_id", type,
						'', 'EQUALS', 'AND');
				filterHelper.addFilterData(filterdata);
			}
			var Formtype = class_form;
			if (Formtype != "") {
				//class_form课程形式
				var filterdata = filterHelper.formFilterData("type", Formtype,
						'', 'EQUALS', 'AND');
				filterHelper.addFilterData(filterdata);
			}
			var jake_URL = "<c:url value='/study/course/list'></c:url>";
			var PageSize = 20;
			$.ajax({
				url : jake_URL,
				type : "post",
				dataType : 'html',
				data : {
					"pageIndex" : home_index,//当前分页码
					"pageSize" : PageSize,//总页码
					"sortField" : home_audit,//排序字段,默认最新auditTime,最热clickNum
					"sortOrder" : "desc",//默认逆序desc
					"filterdata" : JSON.stringify(filterHelper
							.getFilterData())
				},
				success : function(text) {
					var obj = gridDataFormat(text);
					var s_num = obj.count / PageSize;
					wh_count = obj.count;
					var html = "";
					var substr;
					var page_type = "";
					var typeClass = null;
					for(var i in obj.data) {
						var imgPath = obj.data[i].imgPath;
						var imgUUID = obj.data[i].imgUUID;
						var imgSrc = null;
						if(imgPath && imgUUID){
							imgSrc = fileServer+imgPath+'/'+imgUUID;
						}else{
							imgSrc = rootPath+"/share/images/anli.png";
						}
						if (obj.data[i].type === 1) {
							page_type = "图文";
							typeClass = "home_content_float_images";
						}else if (obj.data[i].type === 2) {
							page_type = "音频";
							typeClass = "home_content_float_audio";
						}else if (obj.data[i].type === 3) {
							page_type = "视频";
							typeClass = "home_content_float_video";
						}
						if(obj.data[i].auditTime != null){
							substr = obj.data[i].auditTime.substring(0, 10);
						}
						html = '<li onclick="javascript:window.open(\''+rootPath+'/study/course/detail/'+obj.data[i].id
								+'/'+ obj.data[i].type +'\')"><div class="Interface_relative_row_xs-3"><div class="'+typeClass+'">'
								+ page_type
								+ '</div><img src="'+imgSrc+'"><div class="home_content_1"><div class="home_content_1_title"  title="'+ obj.data[i].class_name +'">'
								+ obj.data[i].class_name
								+ '</div><div class="home_content_1_content"><p>编制人：'
								+ obj.data[i].creater
								+ '</p><p>课程类型：'
								+ obj.data[i].name
								+ '</p><p>发布时间：'
								+ substr
								+ '</p></div><div class="home_content_empty_circular"><p>已学&nbsp; '
								+ obj.data[i].progress
								+ '%</p></div></div></div></li>';
					}
					$("#home_Page_video_audio_text").html(html);
				},
				complete : function(XMLHttpRequest, textStatus) {
					creatPageBar(wh_count,PageSize,type,Formtype,home_audit);
				},
				error : function() {
				}
			});
		}
		
		function creatPageBar(count,PageSize,type,Formtype,home_audit){
			var WHPageBar = document.getElementById('WH-pagebar');
			var CurrentPage = 1;//起始页
			var SingleCount = Math.ceil(count/PageSize)>5?5:Math.ceil(count/PageSize);//翻页显示个数
			var PageCount = Math.ceil(count/PageSize);//总页数
			if(count == 0){
				WHPageBar.innerHTML="";
				$("#WH-pagebar").html("<center>暂时没有课程数据！</center>");
			}else{
				WHPageBar.innerHTML="";
			}
			WH_Pagebar({
				id:'WH-pagebar', //容器ID : 必选参数
				CurrentPage:CurrentPage,   //当前页 ： 可选参数，默认值为1
				SingleCount:SingleCount,   //显示数目： 可选参数，只能为奇数，默认值为7，
				PageCount:PageCount,   //必选参数
				callback : function(pagenow,pagecount){
					//'当前页:' + pagenow +',总共页:'+pagecount;
					$("#home_Page_video_audio_text").html("");
					loadData_modify(type, Formtype, home_audit, pagenow - 1,PageSize);
				}
			})
		}
		
		function loadData_modify(class_id, class_form, home_audit, home_index,PageSize) {
			filterHelper.clearFilterData();
			var type = class_id;
			if (type != "") {
				//class_id课程分类
				var filterdata = filterHelper.formFilterData("class_id", type,
						'', 'EQUALS', 'AND');
				filterHelper.addFilterData(filterdata);
			}
			var Formtype = class_form;
			if (Formtype != "") {
				//class_form课程形式
				var filterdata = filterHelper.formFilterData("type", Formtype,
						'', 'EQUALS', 'AND');
				filterHelper.addFilterData(filterdata);
			}
			var jake_URL = "<c:url value='/study/course/list'></c:url>";
			$.ajax({
				url : jake_URL,
				type : "post",
				dataType : 'html',
				data : {
					"pageIndex" : home_index,//当前分页码
					"pageSize" : PageSize,//总页码
					"sortField" : home_audit,//排序字段,默认最新auditTime,最热clickNum
					"sortOrder" : "desc",//默认逆序desc
					"filterdata" : JSON.stringify(filterHelper
							.getFilterData())
				},
				success : function(text) {
					var obj = gridDataFormat(text);
					var s_num = obj.count / PageSize;
					var html = "";
					var substr;
					var page_type = "";
					var typeClass = null;
					for ( var i in obj.data) {
						var imgPath = obj.data[i].imgPath;
						var imgUUID = obj.data[i].imgUUID;
						var imgSrc = null;
						if(imgPath && imgUUID){
							imgSrc = fileServer+imgPath+'/'+imgUUID;
						}else{
							imgSrc = rootPath+"/share/images/anli.png";
						}
						if (obj.data[i].type === 1) {
							page_type = "图文";
							typeClass = "home_content_float_images";
						}else if (obj.data[i].type === 2) {
							page_type = "音频";
							typeClass = "home_content_float_audio";
						}else if (obj.data[i].type === 3) {
							page_type = "视频";
							typeClass = "home_content_float_video";
						}
						if(obj.data[i].auditTime != null){
							substr = obj.data[i].auditTime.substring(0, 10);
						}
						html += '<li onclick="javascript:window.open(\''+rootPath+'/study/course/detail/'+obj.data[i].id
								+'/'+ obj.data[i].type +'\')"><div class="Interface_relative_row_xs-3"><div class="'+typeClass+'">'
								+ page_type
								+ '</div><img src="'+imgSrc+'"><div class="home_content_1"><div class="home_content_1_title"  title="'+ obj.data[i].class_name +'">'
								+ obj.data[i].class_name
								+ '</div><div class="home_content_1_content"><p>编制人：'
								+ obj.data[i].creater
								+ '</p><p>课程类型：'
								+ obj.data[i].name
								+ '</p><p>发布时间：'
								+ substr
								+ '</p></div><div class="home_content_empty_circular"><p>已学&nbsp; '
								+ obj.data[i].progress
								+ '%</p></div></div></div></li>';
					}
					$("#home_Page_video_audio_text").html(html);
					/* console.log(wh_count);
					if(!obj.data){
						$("#WH-pagebar").html("11111");
					} */
				},
				complete : function(XMLHttpRequest, textStatus) {
				},
				error : function() {
				}
			});
		}
	</script>
</body>
</html>
